<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">

	<ui:define name="content">
		<h1 class="title ui-widget-header ui-corner-all">Rating</h1>
		<div class="entry">
                <p>Rating component provides a star based rating input.</p>
                	
                <h:form id="form">

                    <p:growl id="messages" showDetail="true"/>

                    <h:panelGrid columns="2" cellpadding="5">
                        <h:outputText value="Basic:" />
                        <p:rating value="#{ratingController.rating1}" />

                        <h:outputText value="Callback:" />
                        <p:rating value="#{ratingController.rating2}" stars="10" cancel="false" onRate="alert('You rated ' + value)"/>

                        <h:outputText value="Ajax Rate:" />
                        <p:rating value="#{ratingController.rating3}">
                            <p:ajax event="rate" listener="#{ratingController.onrate}" update="messages" />
                            <p:ajax event="cancel" listener="#{ratingController.oncancel}" update="messages" />
                        </p:rating>

                        <h:outputText value="Readonly:"/>
                        <p:rating value="#{ratingController.rating4}" readonly="true" />

                        <h:outputText value="Disabled"/>
                        <p:rating value="#{ratingController.rating4}" disabled="true" />

                    </h:panelGrid>

                    <p:commandButton value="Submit" id="submit" update="display" oncomplete="dlg.show()" style="margin:5px"/>

                    <p:dialog header="Values" widgetVar="dlg" showEffect="fade" hideEffect="fade">
                        <h:panelGrid id="display" columns="2" cellpadding="5">
                            <h:outputText value="Rating 1:" />
                            <h:outputText value="#{ratingController.rating1}" />

                            <h:outputText value="Rating 2:" />
                            <h:outputText value="#{ratingController.rating2}" />

                            <h:outputText value="Rating 3:" />
                            <h:outputText value="#{ratingController.rating3}" />
                        </h:panelGrid>
                    </p:dialog>

                </h:form>
                        
				<h3>Source</h3>
				<p:tabView>
					<p:tab title="rating.xhtml">
                        <pre name="code" class="xml">
&lt;h:form id="form"&gt;

    &lt;p:growl id="messages" showDetail="true"/&gt;

    &lt;h:panelGrid columns="2" cellpadding="5"&gt;
        &lt;h:outputText value="Basic:" /&gt;
        &lt;p:rating value="\#{ratingController.rating1}" /&gt;

        &lt;h:outputText value="Callback:" /&gt;
        &lt;p:rating value="\#{ratingController.rating2}" stars="10" cancel="false" onRate="alert('You rated ' + value)"/&gt;

        &lt;h:outputText value="Ajax Rate:" /&gt;
        &lt;p:rating value="\#{ratingController.rating3}"&gt;
            &lt;p:ajax event="rate" listener="\#{ratingController.onrate}" update="messages" /&gt;
            &lt;p:ajax event="cancel" listener="\#{ratingController.oncancel}" update="messages" /&gt;
        &lt;/p:rating&gt;

        &lt;h:outputText value="Readonly:"/&gt;
        &lt;p:rating value="\#{ratingController.rating4}" readonly="true" /&gt;

        &lt;h:outputText value="Disabled"/&gt;
        &lt;p:rating value="\#{ratingController.rating4}" disabled="true" /&gt;

    &lt;/h:panelGrid&gt;

    &lt;p:commandButton value="Submit" id="submit" update="display" oncomplete="dlg.show()" style="margin:5px"/&gt;

    &lt;p:dialog header="Values" widgetVar="dlg" showEffect="fade" hideEffect="fade"&gt;
        &lt;h:panelGrid id="display" columns="2" cellpadding="5"&gt;
            &lt;h:outputText value="Rating 1:" /&gt;
            &lt;h:outputText value="\#{ratingController.rating1}" /&gt;

            &lt;h:outputText value="Rating 2:" /&gt;
            &lt;h:outputText value="\#{ratingController.rating2}" /&gt;

            &lt;h:outputText value="Rating 3:" /&gt;
            &lt;h:outputText value="\#{ratingController.rating3}" /&gt;
        &lt;/h:panelGrid&gt;
    &lt;/p:dialog&gt;

&lt;/h:form&gt;
                        </pre>
					</p:tab>
					
					<p:tab title="RatingController.java">
                        <pre name="code" class="java">
package org.primefaces.examples.view;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;

import org.primefaces.event.RateEvent;

public class RatingController {

	private Integer rating1;

	private Integer rating2;

    private Integer rating3;
	
	private Integer rating4 = 3;
	
	public void onrate(RateEvent rateEvent) {
		FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Rate Event", "You rated:" + ((Integer) rateEvent.getRating()).intValue());

		FacesContext.getCurrentInstance().addMessage(null, message);
	}
    
    public void oncancel() {
		FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Cancel Event", "Rate Reset");

		FacesContext.getCurrentInstance().addMessage(null, message);
	}
	
	public Integer getRating1() {
		return rating1;
	}

	public void setRating1(Integer rating1) {
		this.rating1 = rating1;
	}

	public Integer getRating2() {
		return rating2;
	}

	public void setRating2(Integer rating2) {
		this.rating2 = rating2;
	}

	public Integer getRating3() {
		return rating3;
	}

	public void setRating3(Integer rating3) {
		this.rating3 = rating3;
	}

    public Integer getRating4() {
        return rating4;
    }

    public void setRating4(Integer rating4) {
        this.rating4 = rating4;
    }
}
                        </pre>
					</p:tab>
				</p:tabView>
				
				
        		
     </div>
      

	</ui:define>
</ui:composition>